{% extends 'base.html' %}

{% block content %}
<style>
  .text{
    margin-top: 15px;
    font-size: 250%;
  }
</style>

        {% if messages %}
                    {% for message in messages %}
                        <div class="alert {{message.tags}} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    {% endfor %}
        {% endif %}
        
{% if food != 'Ошибка' %}
<div class="card mt-5">
    <div class="d-flex flex-row mb-3">
        <div class="p-4 r-2"><img
                src="{{ food.image.url }}"
                class="rounded float-start" alt="..." width="400px" height="400px">
        </div>
        
        <div class="card-body">
            <h5>
                <small class="text-body-secondary">ID: {{food.id}}</small>
            </h5>
            <div class="mt-3 bg-body-secondary text-emphasis-secondary rounded">
                <h4 class="p-2">
                    {{food.name}}
                </h4>
            </div>

            <div class="mt-3 bg-body-secondary text-emphasis-secondary rounded">
                <h4 class="p-2">
                    {{ food.description }}
                </h4>
            </div>

            <div class="mt-3 bg-body-secondary text-emphasis-secondary rounded" >
                <h4 class="p-2">
                    Витамины:
                    {% for vitamin in vitamins %}
                    {{vitamin.name}},
                    {% endfor %}
                </h4>
            </div>

            <div class="mt-3 bg-body-secondary text-emphasis-secondary rounded">
                <h4 class="p-2">
                    Калории(на 1 кг): {{ food.calories }}
                </h4>
            </div>

            <div class="mt-3 bg-body-secondary text-emphasis-secondary rounded">
                 <h4 class="p-2">
                    Смертельная доза: {{food.deathdoze}} КГ
                </h4>   
            </div>

            <div class="mt-3 bg-body-secondary text-emphasis-secondary rounded">
                <h4 class="p-2">
                    Интересный факт: {{food.interesting_fact}}
                </h4>
            </div>

            {% if user.is_authenticated %}
            <form method="POST">
                {% csrf_token %}
                <input class="mt-2 bg-body-secondary text-emphasis-secondary rounded" type="submit" name="like" value="Лайк"/>
                <input class="mt-2 bg-body-secondary text-emphasis-secondary rounded" type="submit" name="delete_like" value="Удалить лайк"/>
                <input class="mt-2 bg-body-secondary text-emphasis-secondary rounded" type="submit" name="add_to_comprasion" value="Добавить в сравнение"/>
                <input class="mt-2 bg-body-secondary text-emphasis-secondary rounded" type="submit" name="delete_from_comprasion" value="Удалить из сравнения"/>
            </form>
            {% endif %}

        </div>
    </div>
</div>
{% else %}
<div class="header">
    <b>{{food}}</b>
</div>
{% endif %}
<div style="height: 18px;"></div>
{% for link in video_links %}
    <iframe width="31.5%" height="315"
            src={{link}}
            title="YouTube video player"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowfullscreen
            style="margin-left: 10px; margin-right: 10px;">

    </iframe>
{% endfor %}
{% endblock %}